<template>
  <div class="widget_settings_pro">
    <ele-form-section
        labelPosition="left"
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
    >
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
  </div>
</template>

<script>
import { debounce } from '@/utils/utils';
const predefineColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)'
];
export default {
    name: 'imageText',
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        formData: {
            get () {
                return JSON.parse(this.value.styleJson);
            },
            set: debounce(function (newValue) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.value.styleJson = JSON.stringify(newValue);
                    this.$store.commit('SET_PROJECT_DATA', this.value);
                }
            }, 600)
        }
    },
    data () {
        return {
            pageCount: 0,
            activeNames: [],
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            sections: [
                {
                    title: '图片设置',
                    formDesc: {
                        'image': {
                            label: '选择图片',
                            type: 'ele-form-upload-plus-file',
                            attrs: {
                                title: '选择图片',
                                desc: '建议尺寸：1080*900px，高度自适应'
                            }
                        },
                        'link_to_url': {
                            type: 'ele-form-custom-select',
                            label: '图片链接'
                        },
                        'layout': {
                            type: 'select',
                            label: 'PC图位置',
                            options: [
                                {text: '左图右文', value: 'left'},
                                {text: '右图左文', value: 'right'}
                            ]
                        },
                        'text_layout': {
                            type: 'select',
                            label: '文字对齐方式',
                            options: [
                                {text: '居左', value: 'left'},
                                {text: '居中', value: 'center'},
                                {text: '居右', value: 'right'}
                            ]
                        },
                        'is_width_across_screen': {
                            type: 'switch',
                            break: true,
                            label: '宽度铺满屏幕'
                        }
                    }
                },
                {
                    // 分区标题
                    title: '文本设置',
                    // 分区表单项
                    // 和group不同，仅将vue-ele-form的formDesc放入section中
                    formDesc: {
                        'title': {
                            type: 'input',
                            label: '标题'
                        },
                        'desc': {
                            type: 'ele-form-quill-edit',
                            label: '正文'
                        },
                        'title_bg_color': {
                            type: 'color',
                            label: '背景颜色',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'title_color': {
                            type: 'color',
                            label: '标题颜色',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'text_color': {
                            type: 'color',
                            label: '文案颜色',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        }
                    }
                },
                {
                    title: '按钮设置',
                    formDesc: {
                        'button_label': {
                            type: 'input',
                            label: '按钮文案'
                        },
                        'button_link': {
                            type: 'ele-form-custom-select',
                            label: '按钮链接'
                        },
                        'button_border_color': {
                            type: 'color',
                            label: '按钮边框颜色',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'button_bg_color': {
                            type: 'color',
                            label: '按钮背景颜色',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'button_color': {
                            type: 'color',
                            label: '按钮文案颜色',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        }
                    }
                },
                {
                    title: '间距留白',
                    formDesc: {
                        'module_layout': {
                            type: 'ele-spacing'
                        }
                    }
                }
            ]
        };
    },
    methods: {
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (data) {
            console.log(data);
            return Promise.resolve();
        },
        handleRemove (index, record) {
            this.formData.blocks.splice(index, 1);
        },
        reset () {
            this.pageCount = 0;
            if (!('module_layout' in this.value)) {
                this.$set(this.value, 'module_layout', {
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 0
                });
            }
            this.$emit('resetData', this.value);
        }
    },
    mounted () {
        if (!('module_layout' in this.formData)) {
            this.$set(this.formData, 'module_layout', {
                left: 0,
                top: 0,
                right: 0,
                bottom: 0
            });
        }
    }
};
</script>

<style scoped lang="scss">
.form-item-inline{
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}
.editForm{
  margin-bottom: 10px;
  .form-item{
    margin-top: 10px;
    label {
      display: block;
      height: 32px;
      line-height: 32px;
    }
  }
  ::v-deep .el-collapse-item__content{
    border: 1px solid #d8deec;
    border-top:0;
    padding-left: 10px;
  }
}
.addBtn{
  width: 100%;
}
</style>
